<template>
    <div id="LessorsLogin">
        <el-select label-width="100" v-model="value" placeholder="切换登录">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
            >
            </el-option>
        </el-select>

        <h1>lessorsLogin</h1>
        <el-form
            :model="ruleForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
        >
            <el-form-item label="用户名" prop="name">
                <el-input
                    v-model="ruleForm.name"
                    placeholder="请输入用户名"
                ></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="pass">
                <el-input
                    type="password"
                    v-model="ruleForm.pass"
                    autocomplete="off"
                    placeholder="请输入密码"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <template>
                    <el-button
                        type="primary"
                        @click="submitForm('ruleForm')"
                        v-if="state"
                        >提交</el-button
                    >
                    <el-button type="warning" disabled v-if="!state"
                        >提交</el-button
                    >
                </template>
                <el-button
                    type="primary"
                    @click="$router.push('/LessorsRegister')"
                    >没有密码? 立即注册</el-button
                >
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import axios from "axios";
export default {
    data() {
        var checkName = (rule, value, callback) => {
            // let phone = /^1[3-9]\d{9}$/;
            // let email = /^[^0-9]\S*@[0-9A-Za-z]{2,3}.[A-Za-z]{2,4}$/;
            const account = this.ruleForm.name;
            // const isfalse = !(phone.test(account) || email.test(account));

            if (!value) {
                return callback(new Error("用户名不能为空"));
                this.isSubmit();
            }
            setTimeout(() => {
                // if (isfalse) {
                //     callback(
                //         new Error("请输入正确的11位1开头手机号或开头非数字邮箱")
                //     );
                //     this.isSubmit();
                // } else {
                callback();
                this.isSubmit();
                // }
            }, 500);
        };
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
                this.isSubmit();
            } else {
                if (this.ruleForm.checkPass !== "") {
                    this.$refs.ruleForm.validateField("checkPass");
                }
                callback();
                this.isSubmit();
            }
        };
        return {
            //下面是设置按钮的状态,默认是禁止提交状态,当输入内容满足条件后就会切换到可提交状态
            currentBtn: "warning",
            //这个state是为了判断提交按钮的状态是能点击还是不能点击,只有输入的用户名密码满足条件才会变成true,提交按钮变成可提交状态
            state: false,
            ruleForm: {
                pass: "",
                checkPass: "",
                name: "",
            },
            rules: {
                pass: [{ validator: validatePass, trigger: "blur" }],
                name: [{ validator: checkName, trigger: "blur" }],
            },
            //下面是切换登录界面需要的数据 比如租户 出租方 管理员,属性value的值就是要跳转的路由,属性disabled是在比如出租方登录页面,点击下拉菜单后 显示出租方登录的选项是禁止点击的状态,要是不设置disabled属性,再当前页 下拉菜单选项 出租方登录 会报错,添加disabled属性就不会报错了
            options: [
                {
                    value: "/customer",
                    label: "租户",
                },
                {
                    value: "/lessorsLogin",
                    label: "出租方登录",
                    disabled: true,
                },
                {
                    value: "/lessorsRegister",
                    label: "出租方注册",
                },
                {
                    value: "/adminsLogin",
                    label: "管理员",
                },
            ],
            value: "",
        };
    },
    methods: {
        //点击登录
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.lessorsLogin();
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        //重置按钮
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //点击登录
        async lessorsLogin() {
            const account = this.ruleForm.name;
            const password = this.ruleForm.pass;
            const data = await axios({
                url: "http://localhost:3000/lessors/login",
                method: "post",
                data: {
                    account,
                    password,
                },
            });
            if (data.data.status) {
                //登录成功后将token保存到本地存储
                localStorage.setItem("token", data.data.token);
                // console.log(data.data);
                // alert(data.data.message);
                this.open2("恭喜登录成功", "success");
                //下面是登录成功后要跳转的页面,写路由地址就行
                location.href = "./#/system/lookOrders";
            } else {
                this.open2("密码错误请重新输入", "warning");
                this.ruleForm.pass = "";
            }
        },
        //确认提交按钮是不是能点击还是禁止
        isSubmit() {
            const account = this.ruleForm.name;
            const password = this.ruleForm.pass;
            // let phone = /^1[3-9]\d{9}$/;
            // let email = /^[^0-9]\S*@[0-9A-Za-z]{2,3}.[A-Za-z]{2,4}$/;
            // const istrue = phone.test(account) || email.test(account);
            if (account && password) {
                this.state = true;
            } else {
                this.state = false;
            }
        },
        // 提示框  style的值不同触发不同的提示框: 'success','warning',
        open2(msg, style) {
            this.$message({
                message: msg, //    例如: 传入 '恭喜你，这是一条成功消息',
                type: style,
            });
        },
    },
    watch: {
        value(newValue) {
            this.$router.push(newValue);
        },
    },
};
</script>

<style>
#LessorsLogin h1 {
    color: #409eff;
    margin-bottom: 50px;
}
#LessorsLogin {
    width: 450px;
    margin: 50px auto;
    text-align: center;
}
#LessorsLogin .el-select {
    width: 110px;
    left: 195px;
    margin-bottom: 20px;
}
</style>